@extends('initapp')
@section('content')
<style>
    .btn-p{
        border:1px solid #ddd;
        padding: 5px;
        background-color: #ddd;
    }
    /*截图上传页面*/
    .displaynone{
        display: none;
    }
    .clipbg{
        position: fixed;
        background: black;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        left: 0;
    }
    .loading{
        position: absolute;
        top: 40%;
        width: 38%;
        left: 31%;
        height: 40px;
        line-height: 40px;
        z-index: 99999;
        text-align: center;
        color: #ffffff;
        border-radius:5px ;
        background: #9f9f9f;
    }
    .clipbg #clipArea{
        width: 100%;
        height: 80%;
        margin: auto;

    }
    .clipbg .footer{
        width: 100%;
        position: fixed;
        bottom: 0px;
        text-align: center;
    }
    .clipbg dl{
        background: #ffffff;
        overflow: hidden;
    }
    .clipbg dd{
        position: relative;
        height: 40px;
        line-height: 40px;
        border-bottom:1px solid #999999 ;
    }
    .clipbg .back{
        height: 40px;
        line-height:40px;

        background: #ffffff;
    }
    .clipbg dd input{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 11;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -khtml-opacity: 0;
        opacity: 0;
    }
</style>
<ul class="nav nav-tabs">
    <li class="active"><a href="{{ url('/admin/editinit')}}">修改公司信息</a></li>
    <li ><a href="{{ url('/admin/group')}}">返回</a></li>
</ul>
<form id="userForm" method="post" action="{{url('/admin/editinit')}}">
    <div class="panel panel-default description2 mt20">
        <div class="form-group clearfix">
            <label class="col-xs-12 col-sm-3 col-md-2 control-label" style="padding-left: 0;padding-right: 0;">公司名称</label>
            <div class="col-sm-9 col-xs-12" style="padding-left: 0;padding-right: 0;">
                <input type="text" class="form-control" name="name" placeholder="公司名称" value="@if(!empty($name)){{ $name->value }}@endif">
            </div>
            <label class="col-xs-12 col-sm-3 col-md-2 control-label" style="padding-left: 0;padding-right: 0;">公司口号</label>
            <div class="col-sm-9 col-xs-12" style="padding-left: 0;padding-right: 0;">
                <input type="text" class="form-control" name="slogan" placeholder="公司口号" value="@if(!empty($slogan)){{ $slogan->value }}@endif">
            </div>
            <label class="col-xs-12 col-sm-3 col-md-2 control-label" style="padding-left: 0;padding-right: 0;">公司logo</label>
            <div class="col-sm-9 col-xs-12 modify-icon" style="padding-left: 0;padding-right: 0;">
                <input type="hidden" name="logo" value="">
                {{--<input type="text" class="form-control" name="logo" placeholder="公司名称" value="@if(!empty($user)){{ $user->name }}@endif">--}}
                <p class="btn-p">上传公司Logo</p>
                <img style="width:80px;" @if(!empty($logo)) src="{{url($logo->value)}}" @else src="../../images/system/ps1.png" @endif >
            </div>
        </div>
        {!! csrf_field() !!}
        <div class="form-inline">
            <div class="form-group">
              <button type="button" class="btn btn-info" onclick="saveData('/admin/editinit','userForm')">
                    <i class="icon-ok bigger-110"></i>
                    Submit
              </button>  
            </div>
        </div>
    </div>
</form>
<!--图片裁剪-->
<div class="clipbg displaynone">
    <div id="clipArea"></div>
    <div class="loading displaynone">正在载入图片...</div>
    <div class="footer">
        <dl>
            <dd style="background: #fe1041; color: #ffffff;border: none;">打开相册<input type="file" id="file" accept="image/*" ></dd>
            <dd id="clipBtn">完成裁剪</dd>
        </dl>
        <div class="back">取消</div>
    </div>
</div>
<script src="/addons/phtotclip/hammer.min.js"></script>
<script src="/addons/phtotclip/iscroll-zoom-min.js"></script>
<script src="/addons/phtotclip/lrz.all.bundle.js?v=1"></script>
<script src="/addons/phtotclip/photoClip.js?v=1"></script>

<script>
    $(document).ready(function(){
        $(".btn-p").click(function(){
            $(".clipbg").fadeIn()
        })
        var clipArea = new  PhotoClip("#clipArea", {
            size: [300, 300],//裁剪框大小
            outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
            file: "#file",
            outputType: "png",
            ok: "#clipBtn",
            loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                $(".loading").removeClass("displaynone");

            },
            loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                $(".loading").addClass("displaynone");

            },
            done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                var toke = $('input[name=_token]').val();
                $.ajax({
                    'url': '/admin/logo?_token='+toke,
                    'type': 'POST',
                    'data': {'dataURL': dataURL},
                    error: function (request) {
                        console.log("error");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            alert('头像修改成功');
                            $('input[name=logo]').val(data.data);
                            $('.modify-icon img').attr("src",dataURL);
                        } else {
                            console.log("error");
                        }
                    },
                });
                $(".clipbg").fadeOut();
            }
        });
        $(".back").click(function(){
            $(".clipbg").fadeOut();
        })

    });
</script>
@endsection
